<template>
  <div>
    <headers :head_title="head_title" />
    <main>
      <div class="file_list">
        <p>[主要症状]</p>
        <input type="text" placeholder="请输入您的主要症状" class="file_input" v-model="main" />
      </div>

      <div class="file_list">
        <p>[现病史]</p>
        <input type="text" placeholder="请输入您的主要症状" class="file_input" v-model="now" />
      </div>

      <div class="file_list">
        <p>[既往病史]</p>
        <input type="text" placeholder="请输入您的主要症状" class="file_input" v-model="before" />
      </div>

      <div class="file_list">
        <p>[最后一次治疗经历]</p>
        <input
          type="text"
          placeholder="请输入您的主要症状"
          class="file_input"
          v-model="Hospitalrecent"
        />
      </div>
      <!-- 开始日期选择器 -->
      <div class="file_list">
        <timeView />
      </div>
      <div class="file_list">
        <timeView2 />
      </div>
      <div class="file_list">
        <input type="text" placeholder="请输入治疗过程" class="file_input" v-model="Process" />
      </div>
      <div class="file_list">
        <p>[相关图片]</p>
        <van-notice-bar color="#000" background="#eee" style="font-size: 27px">
          &emsp; 最多六张图片;长按为图片排序
        </van-notice-bar>
        <index />
      </div>
      <div style="width: 100%; height: 200px; position: absolute">
        <el-button class="submit_tj" type="primary" @click="submit_list">保存</el-button>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { onMounted, ref, watchEffect } from 'vue'
import headers from '@/components/header.vue'
import http from '@/http'
// 引入开始时间选择器
import timeView from '@/components/timeView.vue'
// 引入结束时间选择器
import timeView2 from '@/components/timeView2.vue'
// 拖拽插件
import index from '@/components/index.vue'
const router = useRouter()
//head头部数据
const head_title = ref('我的档案')

// 获取数据
// 获取主要病症数据
const main = ref('')
// 获取现病史
const now = ref('')
// 获取既病史
const before = ref('')
// 获取最近治疗医院
const Hospitalrecent = ref('')
// 获取开始时间
const finally_item1 = ref(localStorage.getItem('time1'))
// 获取结束时间
const finally_item2 = ref(localStorage.getItem('time2'))
console.log('开始时间', finally_item1.value);

//获取治疗过程
const Process = ref('')
// 获取照片资料

const imgssc = ref(localStorage.getItem('archives'))


const list_file=ref([])
async function getFile() {
  const res = await http.get('http://localhost:3000/list')
  list_file.value = res.data
   console.log(list_file.value)
}
getFile()
// 提交数据到仓库
const submit_list = () => {
  console.log('点击提交')
  router.push('/my_file')
// http.delete("http://localhost:3000/list")
  //   // 以下为假数据，请自行根据需求修改
  const newDate = {
    // id: 1,
     id:1,
    // 主要病症
    diseaseMain: main.value,
    // 现病史
    diseaseNow: now.value,
    // 既病史
    diseaseBefore: before.value,
    // 最近治疗医院
    treatmentHospitalRecent: Hospitalrecent.value,
    // 最近治疗开始时间
    treatmentStartTime: finally_item1.value,
    // 最近治疗结束时间
    treatmentEndTime: finally_item2.value,
    // 治疗过程
    treatmentProcess: Process.value,
    // 照片资料
    archives: [],
  }
  //上传数据到仓库
  const headers = {
    'Content-Type': 'application/json',
  }
  http
    .post('http://localhost:3000/list', newDate, { headers })
    .then((res) => {
      if (res.status >= 200 && res.status < 300) {
        console.log('提交成功，响应数据:', res.data)
      } else {
        console.error('提交失败，状态码:', res.status)
      }
    })
    .catch((error) => {
      console.error('提交数据出现错误：', error)
    })

}

</script>

<style scoped lang="scss">

* {
  margin: 0;
  padding: 0;
}
.head {
  height: 50px; // 100px * 0.5 = 50px
  line-height: 75px; // 150px * 0.5 = 75px
  display: flex;
  /* background: red; */
  color: #999;
  position: relative;
}

.message_title {
  color: black;
  position: absolute;
  left: 40%;
  font-size: 17px; // 34px * 0.5 = 17px
}

.line {
  height: 7.5px; // 15px * 0.5 = 7.5px
  width: 100%;
  margin-top: 5px; // 10px * 0.5 = 5px
}

.file_list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 5px; // 10px * 0.5 = 5px
}

.file_list > p {
  font-size: 13.5px; // 27px * 0.5 = 13.5px
  margin-top: 5px; // 10px * 0.5 = 5px
  margin-left: 12.5px; // 25px * 0.5 = 12.5px
  color: #368beb;
}

.file_input {
  width: 46.5%; // 93% * 0.5 = 46.5%
  height: 25px; // 50px * 0.5 = 25px
  margin-left: 12.5px; // 25px * 0.5 = 12.5px
  margin-top: 2.5px; // 5px * 0.5 = 2.5px
  border: none;
  border-bottom: solid 0.5px #ccc; // 1px * 0.5 = 0.5px
  padding-bottom: 2.5px; // 5px * 0.5 = 2.5px
}

.submit_tj {
  width: 93%; // 93% * 0.5 = 46.5%
  height: 40px; // 80px * 0.5 = 40px
  font-size: 15px; // 30px * 0.5 = 15px
  margin-left: 12.5px; // 25px * 0.5 = 12.5px
  position: relative;
  bottom: 0%;
  top: 20%; // 40% * 0.5 = 20%
}
</style>
